<template>
    <div style="padding:20px">
        <div id='showorders' style='width:300px; height:500px'></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { events } from '@/bus'
import { getTotalBarData } from '@/api/business/questions/statistics/StatisticConfig'

const barData = ref([])
const init = () => {
  // 基于准备好的dom，初始化echarts实例
  const chartDom = document.getElementById('showorders')
  const myChart = echarts.init(chartDom)
  // 指定图表的配置项和数据
  let option

  // eslint-disable-next-line prefer-const
  option = {
    xAxis: {
      type: 'category',
      data: ['优秀', '良好', '较好', '一般', '较差']
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {},
    series: [
      {
        name: '次数',
        data: barData.value,
        type: 'bar'
      }
    ]
  }
  option && myChart.setOption(option)
}

const bindBar = () => {
  events.on('bindBarData', (message) => {
    getTotalBarData({
      questionId: message
    }).then(data => {
      barData.value.push(data.data.excellent)
      barData.value.push(data.data.good)
      barData.value.push(data.data.quiteGood)
      barData.value.push(data.data.commonly)
      barData.value.push(data.data.poor)
      init()
    })
  })
}
onMounted(
  () => {
    // init()
    bindBar()
  }
)
</script>
